<template>
	<view>
		<cu-custom bgColor="bg-gradual-fff" isBack="true">
			<block slot="content">二手市场</block>
		</cu-custom>
		<u-loading-page :loading="true" loading-text="loading..." v-if="showLoading"></u-loading-page>
		<view v-show="!showLoading" class="layout">
			<view class="viewbox"></view>
			<view class="category-container" :style="[{top:CustomBar + 'px'}]">
				<view class="category-title">分类</view>
				<view class="category-item" :class="{ 'selected': selectedCategory === '不限' }"
					@click="selectCategory('不限')">
					<text class="category-name">不限</text>
				</view>
				<view class="category-item" v-for="(category, index) in categories" :key="index"
					:class="{ 'selected': selectedCategory === category.name }"
					@click="selectCategory(category.name,category.id)">
					<text class="category-name">{{ category.name }}</text>
				</view>
			</view>
			<!-- 瀑布流商品 -->
			<view :style="[{ marginTop:CustomBar + 'px' }]">
				<liu-waterfall :dataList="data" column="2" @click="clickpage()"></liu-waterfall>
			</view>
		</view>
	</view>
</template>

<script>
	import api from '../../common/apiService';
	import request from '../../common/request';
	export default {
		data() {
			return {
				showLoading: false,
				selectedCategory: '不限',
				categoryId: null,
				StatusBar: this.StatusBar,
				CustomBar: this.CustomBar,
				categories: [],
				data: [],
			}
		},
		methods: {
			selectCategory(category, id) {
				this.selectedCategory = category;
				this.categoryId = id
				console.log("打印", this.categoryId)
				this.getgoodslist()
			},
			getallcategory() {
				let paramsList = {

				}
				let optsList = {
					url: 'api/category/enabled',
					method: 'get'
				};
				let _this = this;
				request.httpRequest(optsList, paramsList).then(res => {
					if (res.data.code == 200) {
						console.log("接口", res.data.data)
						_this.categories = res.data.data
					}
				});
			},
			getgoodslist() {
				let paramsList = {

				}
				let url = 'api/goods/list?pageSize=999&pageNum=1';
				if (this.categoryId != null) {
					url += `&categoryId=${this.categoryId}`;
				}

				let optsList = {
					url: url,
					method: 'get'
				};
				let _this = this;
				request.httpRequest(optsList, paramsList).then(res => {
					if (res.data.code == 200) {
						_this.data = res.data.rows.map(item => {
							return {
								...item,
								image: request.baseUrl_img + item.image
							};
						});
						console.log("接口", res.data.rows)

					}
				});
			},
			clickpage(e) {
				console.log('点击内容', e)
				uni.navigateTo({
					url: `/pages/goodsdetail/goodsdetail?id=` + e.id
				})
			}
		},
		computed: {
			style() {
				const StatusBar = this.StatusBar;
				const CustomBar = this.CustomBar;
				const style = `height:${CustomBar}px;padding-top:${StatusBar}px;`;
				return style
			}
		},
		mounted() {
			this.getallcategory()
			this.getgoodslist()
		}
	}
</script>

<style lang="scss" scoped>
	.layout {

		.category-container {
			position: fixed;
			/* 固定在顶部 */
			// top: 100rpx;
			width: 750rpx;
			display: flex;
			max-height: 150rpx;
			overflow: auto;
			flex-wrap: wrap;
			margin-top: 20rpx;
			border-radius: 20rpx;
			// background: ;
			backdrop-filter: blur(10rpx);
			z-index: 99;
			box-shadow: inset 0 0 10rpx 10rpx rgba(184, 223, 229, 0.3);

			.category-title {
				font-size: 30rpx;
				font-weight: bold;
				margin: 10rpx;
				padding: 15rpx;
			}

			.category-item {
				margin: 10rpx;
				padding: 15rpx;
				border-radius: 8rpx;
				box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
				text-align: center;
			}

			.selected {
				background-color: #ffcccc;
			}

			.category-name {
				font-size: 28rpx;
				color: #666;
			}
		}
	}
</style>